<template>
  <input
    type="text"
    :value="val"
    :class="size"
    @input="onInput"
    @blur="onBlur"
    @keyup.enter="onChange"
  >
</template>

<script>
export default {
  model: {
    prop: 'val',
    event: 'heihei',
  },
  props: {
    val: String,
    size: String, // 'large' | 'small' | 'mini'
  },
  methods: {
    onInput (e) {
      this.$emit('heihei', e.target.value);
      this.$emit('input', e.target.value);
    },
    onBlur () {
      this.$emit('blur', this.val);
      this.onChange();
    },
    onChange () {
      // 仅在输入框失去焦点或用户按下回车时触发
      this.$emit('change', this.val);
    },
  },
}
</script>

<style scoped>
.large {
  height: 50px;
}
.small {
  height: 40px;
}
.mini {
  height: 30px;
}
</style>